package com.example.greetingcard

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.greetingcard.ui.theme.GreetingCardTheme


/**
 * 摘要
 * 创建新项目的具体方法为：打开 Android Studio，依次点击 New Project > Empty Activity > Next，输入项目名称，然后配置该项目的设置。
 * 如要查看应用的外观，请使用 Preview 窗格。
 * 可组合函数与常规函数类似，但存在以下区别：函数名称采用首字母大写形式，需在该函数前面添加 @Composable 注解，@Composable 函数无法返回任何内容。
 * Modifier 用于扩充或修饰可组合项。
 */
class MainActivity : ComponentActivity() {


    /**
     * onCreate() 函数是此 Android 应用的入口点，并会调用其他函数来构建 UI。
     * 在 Kotlin 程序中，main() 函数是执行的入口点/起点。
     * 在 Android 应用中，则是由 onCreate() 函数来担任这个角色。
     *
     * onCreate() 函数中的 setContent() 函数用于通过可组合函数定义布局。
     * 任何标有 @Composable 注解的函数都可通过 setContent() 函数或其他可组合函数进行调用。
     * 该注解可告知 Kotlin 编译器 Jetpack Compose 使用的这个函数会生成 UI。
     */
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            GreetingCardTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Greeting(
                        name = "Asuka",
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}


/**
 * 1.目前，Greeting() 函数可接收名称，并会向其用户显示 Hello。
 * 2.Android 应自动更新预览
 */
@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {

    /**
     * 若要为自我介绍设置不同的背景颜色，您需要使用 Surface 将文本包围起来。Surface 是一个容器，代表界面的某一部分，您可以在其中更改外观（如背景颜色或边框）。
     * 1.若要使用 Surface 将文本包围起来，请突出显示该行文本，按下 Alt+Enter (Windows) 或 Option+Enter (Mac)，然后选择 Surround with widget。
     * 2.选择 Surround with Container。
     * 默认容器为 Box，但您可以将其更改为其他容器类型。 本课程稍后会介绍 Box 布局。
     * 3.删除 Box，改为输入 Surface()。
     * 4.向 Surface 容器添加 color 参数，将其设置为 Color。
     * 5.输入 Color 后，您可能会发现它是红色的，这意味着 Android Studio 无法解析它。为了解决此问题，请滚动到文件顶部显示“import”字样的位置，然后按下三点状按钮。
     * 6.将以下语句添加到导入列表底部。
     * import androidx.compose.ui.graphics.Color
     * 7.在您的代码中，最佳实践是确保导入按字母顺序列出并移除未使用的导入。为此，请按下顶部工具栏中的 Help，输入 Optimize Imports，然后点击 Optimize Imports。
     * 8.请注意，您在 Surface 后的括号内输入的 Color 已从红色更改为带有红色下划线。为了解决该问题，请在其后添加英文句点。您将会看到一个显示不同颜色选项的弹出式窗口。
     * 这是 Android Studio 中一项很棒的功能，它非常智能，可以适时为您提供帮助。在此例中，该功能知道您想指定一种颜色，因此为您建议了各种颜色。
     * 9.为表面选择一种颜色。本 Codelab 使用的是蓝绿色，但您可以选择自己喜欢的颜色！
     *
     *
     * 在文本周围添加一些空格（内边距）。
     * Modifier 用于扩充或修饰可组合项。您可以使用的其中一个修饰符是 padding 修饰符，它会在元素周围添加空格（在本例中，是在文本周围添加空格）。为此，请使用 Modifier.padding() 函数。
     * 每个可组合函数都应具有 Modifier 类型的可选参数。这应是第一个可选参数。
     * 1.为 modifier 添加尺寸为 24.dp 的内边距。
     * 2.将这些导入添加到导入语句部分中。
     * 请务必使用 Optimize Imports 按字母顺序排列新的导入。
     * import androidx.compose.ui.unit.dp
     * import androidx.compose.foundation.layout.padding
     *
     */
    Surface( color = Color.Cyan )  {
        Text(
            text = "你好，我的名字是 $name!",
            modifier = modifier.padding(24.dp)
        )
    }
}

/**
 * GreetingPreview() 函数是一项很酷的功能，
 * 让您无需构建整个应用就能查看可组合函数的外观。
 * 如需实现可组合函数的预览，您需要添加 @Composable 和 @Preview 注解。
 * @Preview 注解会告知 Android Studio 此可组合函数应显示在此文件的设计视图中。
 * @Preview 注解可以接收名为 showBackground 的参数。如果 showBackground 设置为 true，则会向可组合函数预览添加背景。
 */
@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    GreetingCardTheme {
        Greeting("Asuka")
    }
}